<template>
    <div>
        <div class="re-item__bannerBox">
            <div class="re-item__banner" :style="{backgroundImage:'url('+item.actcoverimage+')'}">
                <div class="re-item__label" 
                    :style="{
                        backgroundColor: item.label===1?'#ff7d6a':item.label===2?'#acd60a':'#acd60a'
                    }"
                >
                    <svg class="icon cell_icon" 
                        aria-hidden="true" 
                        slot="icon" 
                        :style="{
                            width : item.act_label_id===1?'.28rem':item.act_label_id===2?'.32rem':'.28rem',
                            height : item.act_label_id===1?'.28rem':item.act_label_id===2?'.32rem':'.28rem',
                            marginRight : '0',
                            verticalAlign : item.act_label_id===1?'-.04rem':item.act_label_id===2?'-.06rem':'-.04rem',
                        }"
                    >
                        <use :xlink:href="item.act_label_id===1?'#icon-remenx':item.act_label_id===2?'#icon-mianfei':'#icon-guanfangwangzhan'"></use>
                    </svg>
                    {{item.act_label_id===1?'推荐':item.act_label_id===2?'免费':'官方'}}
                </div>
            </div>
        </div>
        <p class="re-item__title">{{item.acttitle}}</p>
        <p class="re-item__content">{{item.content}}</p>
        <cell :title="this.actTime">
            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem">
                <use xlink:href="#icon-shijian-tianchong"></use>
            </svg>
            <div>
                <span style="color: #ff721f">{{item.timeTips}}</span>
            </div>
        </cell>

        <cell is-link value="地图">
            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.5rem;height:.5rem;margin-left:-.06rem">
                <use xlink:href="#icon-dizhi"></use>
            </svg>
            <span slot="title">
                <p style="vertical-align:middle;">{{item.address}}</p> 
                <p style="vertical-align:middle;color:#ccc">{{item.addressDetail}}</p> 
            </span>
        </cell>
        <cell :title="'限'+this.regiLimit+'人报名 剩余'+this.regiLeft+'人'">
            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem">
                <use xlink:href="#icon-sangeren"></use>
            </svg>
            <div>
                <span style="color: #ff721f">已报名：{{this.hadRegiCount}}人</span>
            </div>
        </cell>
        <!-- <cell :title="'由'+item.organizer+'承办'" :value="'好评率:'+item.goodRate+'%'">
            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.45rem;height:.45rem">
                <use xlink:href="#icon-ai246"></use>
            </svg>
            
        </cell> -->
        <cell :title="'￥'+this.mincost+' 起'" :value="'赠品:'+this.mingift+ ' 狗币'">
            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.36rem;height:.36rem;margin-left:.03rem;">
                <use xlink:href="#icon-qian"></use>
            </svg>
        </cell>
    </div>
</template>

<script>
import { Group , Cell } from 'vux'
export default {
    name: 'Actone',
    props: {
        Actitem: Object
    },
    components: {
        Cell
    },
    data () {
        return {
            item: this.Actitem,
            hadRegiCount: 5
        }
    },
    computed: {
        actTime () {
            return this.common.formatDateTime(this.item.starttime)+ ' 至 ' + this.common.formatDateTime(this.item.endtime)
        },
        regiLimit () {
            let product = this.item.product
            let amount = 0;
            for(let i = 0; i < product.length; i++){
                amount += product[i].productamount
            }
            return amount
        },
        regiLeft () {
            return this.regiLimit - this.hadRegiCount
        },
        mincost () {
            
            let product = this.item.product
            return product[0].productprice
            // let minprice = 0
            // let index = 0
            // for(let i = 0;i < product.length;i++){
            //     if(product[i+1].productprice > product[i].productprice) {

            //     }
            // }
        },
        mingift () {
            let product = this.item.product
            return product[0].paygiftmoney
        }
    }
}
</script>

<style lang="stylus" scoped>
.re-item__bannerBox
    width: 100%
    border-radius: .1rem
    .re-item__label
        width: 1.2rem
        height: .4rem
        line-height: .4rem
        margin-top: .1rem  
        text-align: center
        border-radius: 0  .2rem .2rem 0  
        color: #fff
        font-size: 0.12rem
    .re-item__banner
        width:100%
        height:0
        padding-bottom: 45%
        overflow:hidden
        background-position: center center
        background-repeat: no-repeat
        -webkit-background-size:cover
        -moz-background-size:cover
        background-size:cover
        border-radius: .1rem
.re-item__title
    line-height: .8rem
    font-size: 14px
    font-weight: 600
.re-item__content
    line-height: .38rem
    font-size: 12px
    color: #ccc
    margin-bottom: .1rem
.cell_icon
    margin-right: .2rem
    vertical-align: -.05rem
</style>
